import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:get/get.dart';
import 'package:situation/resources/assets.dart';
import 'package:situation/widgets/map/layer/imaging_layer.dart';
import 'package:situation/widgets/mk_load_image.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';
import 'state.dart';

class MapPointSelectPage extends StatefulWidget {
  const MapPointSelectPage({Key? key}) : super(key: key);

  @override
  State<MapPointSelectPage> createState() => _MapPointSelectPageState();
}

class _MapPointSelectPageState extends State<MapPointSelectPage> {
  final MapPointSelectController controller = Get.put(
    MapPointSelectController(),
  );
  final MapPointSelectState state = Get.find<MapPointSelectController>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TDNavBar(
        title: '位置选择',
        rightBarItems: [
          TDNavBarItem(action: controller.onSave, iconWidget: Icon(Icons.save)),
        ],
      ),
      body: Obx(
        () => FlutterMap(
          options: MapOptions(
            initialCenter: state.latlon,
            initialZoom: 17,
            backgroundColor: Colors.black87,
            keepAlive: false,
            onTap: controller.mapOnTap,
          ),
          children: [
            ...ImagingLayer.getImagingLayer(),
            Obx(
              () =>
                  state.point.latitude == 0
                      ? SizedBox()
                      : MarkerLayer(
                        markers: [
                          Marker(
                            point: state.point,
                            child: MkLoadImage(
                              Assets.mapMapPointActive,
                              width: 30,
                            ),
                          ),
                        ],
                      ),
            ),

            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: EdgeInsets.only(bottom: 0),
                padding: EdgeInsets.all(8),
                width: Get.width,
                height: 70,
                decoration: BoxDecoration(color: Colors.black.withAlpha(120)),
                alignment: Alignment.center,
                child:
                    state.point.latitude == 0
                        ? Text(
                          '请选择点',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                          ),
                        )
                        : Column(
                          children: [
                            Text(
                              "地址：${state.mapLatlonDto.address}",
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                              ),
                            ),
                            Text(
                              "经度：${state.point.longitude}",
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                              ),
                            ),
                            Text(
                              "纬度：${state.point.latitude}",
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<MapPointSelectController>();
    super.dispose();
  }
}
